<script setup>
import { Close, Minus, Refresh } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ipcRendererSend, createWindow } from "@/utils/ipcRenderer";
import { useRoute, useRouter } from "vue-router";
import { Local } from "../../utils/storage";
import { RmMessage } from "../../utils/RmMessage";
import { storeToRefs } from "pinia";
import { userStore } from "@/store/user";
import updateElectronVue from "./update-electron.vue";
import { getUserRefresh } from "../../apis/user";
import emitter from "../../utils/eventBus";
const { loginStatus, userInfo, userId } = storeToRefs(userStore());

const maxIcon = ref("FullScreen");
const router = useRouter();
const route = useRoute();
const updatePercent = ref(0);
const isShowUpdate = ref(false);

const clickBar = async (num) => {
  if (num == 0) {
    // if (Local.get("token")) {
    //   await getUserRefresh({}).then((res) => {
    //     if (res.code == 200) {
    //       Local.set("token", res.cookie);
    //     }
    //   });
    // }
    location.reload();
  } else if (num == 1) {
    ipcRendererSend("window-min", {});
  } else if (num == 2) {
    ipcRendererSend("window-max", {});
  } else {
    ElMessageBox.confirm("是否关闭播放器?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        ipcRendererSend("close-windows", { isQuit: 1 });
      })
      .catch(() => {});
  }
};

const { ipcRenderer } = require("electron");
ipcRenderer.on("restoreMaximize", (event, args) => {
  if (args == "restore") {
    maxIcon.value = "FullScreen";
  } else {
    maxIcon.value = "CopyDocument";
  }
});

const handleClick = (type) => {
  if (type == 1) {
    router.push("/home");
    // Local.set(
    //   "token",
    //   "MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/weapi/feedback;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/wapi/feedback;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/eapi/feedback;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/eapi/feedback;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/weapi/clientlog;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/api/clientlog;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/weapi/clientlog;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/wapi/feedback;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/eapi/clientlog;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/api/feedback;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/openapi/clientlog;;__remember_me=true; Max-Age=1296000; Expires=Wed, 30 Nov 2022 11:56:36 GMT; Path=/;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/weapi/feedback;;MUSIC_SNS=; Max-Age=0; Expires=Tue, 15 Nov 2022 11:56:36 GMT; Path=/;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/api/feedback;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/wapi/clientlog;;__csrf=2d39482936ec9ed8cebe333ee3dd97c0; Max-Age=1296010; Expires=Wed, 30 Nov 2022 11:56:46 GMT; Path=/;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/neapi/clientlog;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/neapi/feedback;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/api/clientlog;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/eapi/clientlog;;MUSIC_U=031530e9e9e46402a849f7d49368d3f33d249fcf3787b8d652df4927f61b27ce993166e004087dd31726ee028e343eb2a6fa5c52f6e31ae910b9c3c5b5f1109ddb307fa70b595bf2a89fe7c55eac81f3; Max-Age=1296000; Expires=Wed, 30 Nov 2022 11:56:36 GMT; Path=/;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/wapi/clientlog;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/neapi/feedback;;MUSIC_A_T=1460820034686; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/openapi/clientlog;;MUSIC_R_T=1460820157386; Max-Age=2147483647; Expires=Sun, 03 Dec 2090 15:10:43 GMT; Path=/neapi/clientlog;"
    // );
    // Local.set("userInfo", {
    //   backgroundUrl:
    //     "https://p3.music.126.net/A5bVOMf5u7Nt0Cy-wsyeIg==/109951165052401264.jpg",
    //   userId: 266972178,
    //   avatarImgIdStr: "109951166899600696",
    //   backgroundImgIdStr: "109951165052401264",
    //   userType: 0,
    //   followed: false,
    //   avatarUrl:
    //     "https://p4.music.126.net/vfEm3dcOS7fL0TvTvzZPhw==/109951166899600696.jpg",
    //   vipType: 0,
    //   authStatus: 0,
    //   djStatus: 0,
    //   detailDescription: "",
    //   experts: {},
    //   expertTags: null,
    //   accountStatus: 0,
    //   nickname: "杨小卿玖",
    //   birthday: 916848000000,
    //   gender: 1,
    //   province: 440000,
    //   city: 440300,
    //   avatarImgId: 109951166899600700,
    //   backgroundImgId: 109951165052401260,
    //   defaultAvatar: false,
    //   mutual: false,
    //   remarkName: null,
    //   description: "",
    //   signature: "其实我们都一样",
    //   authority: 0,
    //   avatarImgId_str: "109951166899600696",
    //   followeds: 11,
    //   follows: 15,
    //   eventCount: 1,
    //   avatarDetail: null,
    //   playlistCount: 8,
    //   playlistBeSubscribedCount: 0,
    // });
    // userInfo.value = {
    //   backgroundUrl:
    //     "https://p3.music.126.net/A5bVOMf5u7Nt0Cy-wsyeIg==/109951165052401264.jpg",
    //   userId: 266972178,
    //   avatarImgIdStr: "109951166899600696",
    //   backgroundImgIdStr: "109951165052401264",
    //   userType: 0,
    //   followed: false,
    //   avatarUrl:
    //     "https://p4.music.126.net/vfEm3dcOS7fL0TvTvzZPhw==/109951166899600696.jpg",
    //   vipType: 0,
    //   authStatus: 0,
    //   djStatus: 0,
    //   detailDescription: "",
    //   experts: {},
    //   expertTags: null,
    //   accountStatus: 0,
    //   nickname: "杨小卿玖",
    //   birthday: 916848000000,
    //   gender: 1,
    //   province: 440000,
    //   city: 440300,
    //   avatarImgId: 109951166899600700,
    //   backgroundImgId: 109951165052401260,
    //   defaultAvatar: false,
    //   mutual: false,
    //   remarkName: null,
    //   description: "",
    //   signature: "其实我们都一样",
    //   authority: 0,
    //   avatarImgId_str: "109951166899600696",
    //   followeds: 11,
    //   follows: 15,
    //   eventCount: 1,
    //   avatarDetail: null,
    //   playlistCount: 8,
    //   playlistBeSubscribedCount: 0,
    // };
    // loginStatus.value = true;
    // userId.value = "266972178";
  } else if (type == 2) {
    router.push("/found");
  } else {
    router.push("/libaray");
  }
};

const handleChange = (type) => {
  if (type == 1) {
    router.go(-1);
  } else {
    router.go(1);
  }
};

//更新
const updateClick = () => {
  ipcRendererSend("upload-sys", {
    updateUrl: "https://pan.svger.cn/d/music-electron",
  });
};
ipcRenderer.on("update-state", (event, data) => {
  console.log(data);
  if (data.cmd == "update-available") {
    ElMessageBox.confirm("检测到有新版本可更新,是否现在更新?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        isShowUpdate.value = true;
        ipcRenderer.send("down-load-update");
      })
      .catch(() => {
        return;
      });
  }
  if (data.cmd == "error") {
    // 出错了
    isShowUpdate.value = false;
    RmMessage.error("更新出错了,请重新尝试");
  }
  if (data.cmd == "update-not-available") {
    isShowUpdate.value = false;
    RmMessage.success("已是最新版本！");
  }
  if (data.cmd == "download-progress") {
    // 下载进度
    updatePercent.value = parseInt(data.message.percent);
    if (parseInt(data.message.percent) == 100) {
      // isShowUpdate.value = false;
      Local.set("electronVer", latestVersion);
    }
  }
});

//退出
const handleQuit = () => {
  ElMessageBox.confirm("是否退出登录?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      Local.remove("token");
      Local.remove("userInfo");
      Local.remove("user");
      userInfo.value = {};
      userId.value = "";
      loginStatus.value = false;
      router.push("/login");
    })
    .catch(() => {});
};

//搜索
const keyword = ref("");
const handleSearch = () => {
  if (route.path.split("/")[1] == "searchHome") {
    emitter.emit("updateSearch", keyword.value);
  } else {
    router.push("/searchHome/" + keyword.value);
  }
};
//设置
const handleSetUp = () => {
  router.push("/setUp");
};
</script>

<template>
  <div class="container">
    <div class="bar-wrapper">
      <div class="left">
        <i @click="handleChange(1)" class="iconfont icon-31fanhui1"></i>
        <i @click="handleChange(2)" class="iconfont icon-31fanhui2"></i>
        <!-- <el-input placeholder="搜索音乐"></el-input> -->
      </div>
      <div class="middle f-a-c">
        <div :class="{ active: route.path == '/home' }" @click="handleClick(1)">
          首页
        </div>
        <div
          :class="{ active: route.path == '/found' }"
          @click="handleClick(2)"
        >
          发现
        </div>
        <div
          :class="{
            active: route.path == '/login' || route.path == '/libaray',
          }"
          @click="handleClick(3)"
        >
          音乐库
        </div>
      </div>
      <div class="right">
        <!-- <el-input
          @keyup.enter.native="handleSearch"
          v-model="keyword"
          placeholder="搜索"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input> -->
        <input
          type="text"
          @keyup.enter.native="handleSearch"
          v-model="keyword"
          placeholder="搜索"
          class="input"
        />
        <el-dropdown>
          <img
            v-if="!loginStatus"
            src="../../assets/images/logo/logo2.png"
            alt=""
          />
          <img v-else :src="userInfo.avatarUrl" alt="" />
          <template #dropdown>
            <el-dropdown-menu style="width: 130px">
              <el-dropdown-item
                @click="router.push('/login')"
                v-if="!loginStatus"
                ><i class="iconfont icon-denglu1"></i>登录</el-dropdown-item
              >
              <el-dropdown-item @click="handleQuit" v-else
                ><i class="iconfont icon-tuichudenglu"></i>
                退出</el-dropdown-item
              >
              <el-dropdown-item @click="handleSetUp"
                ><i
                  class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"
                ></i>
                设置</el-dropdown-item
              >
              <!-- <el-dropdown-item v-if="loginStatus">个人中心</el-dropdown-item> -->
              <el-dropdown-item @click="updateClick"
                ><i class="iconfont icon-gengxin"></i>更新程序</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-icon :size="18" @click="clickBar(0)" class="click-icon click-home">
          <Refresh />
        </el-icon>
        <el-icon :size="18" @click="clickBar(1)" class="click-icon click-home">
          <Minus />
        </el-icon>
        <el-icon
          :size="18"
          @click="clickBar(2)"
          class="fullscreen click-icon click-home"
        >
          <component :is="maxIcon" />
        </el-icon>
        <el-icon
          :size="20"
          @click="clickBar(3)"
          class="click-icon close-icon click-home"
        >
          <Close />
        </el-icon>
      </div>
    </div>
  </div>
  <updateElectronVue
    :percent="updatePercent"
    :show-close="false"
    v-if="isShowUpdate"
  >
  </updateElectronVue>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 54px;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 6;
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.295);
  -webkit-app-region: drag;
  .bar-wrapper {
    position: relative;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .left {
    i {
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      display: flex;
      margin-left: 30px;
      justify-content: center;
      font-weight: 1000;
      -webkit-app-region: no-drag;
      &:hover {
        background-color: #eee;
        color: rgb(44, 39, 205);
      }
    }
    -webkit-app-region: no-drag;
    display: flex;
    // margin-left: 200px;
    align-items: center;
  }
  .middle {
    position: absolute;
    left: 50%;
    margin-left: -141px;
    div {
      -webkit-app-region: no-drag;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      cursor: pointer;
      padding: 5px 26px;
      border-radius: 8px;
      &:nth-child(2) {
        margin: 0 0px;
      }
    }
    div:hover {
      background-color: rgba(243, 242, 242, 0.889);
      color: #3a30ca;
    }
    .active {
      color: #3917d3;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .el-input {
      width: 160px;
      height: 25px;
      -webkit-app-region: no-drag;
      i {
        line-height: 25px;
        padding: 0;
      }
      :deep(.el-input__wrapper) {
        height: 25px;
        border: none;
        border-radius: 5px;
        background-color: rgba(209, 209, 214, 0.28);
        color: cornflowerblue;
        font-weight: 600;
        // background-color: #e13e3e;
        &.is-focus {
          box-shadow: 0 0 0 1px rgba(55, 61, 226, 0.578);
        }
      }
      :deep(.el-input__inner) {
        height: 25px;
        border: none;
        border-radius: 5px;
        background-color: transparent;

        color: cornflowerblue;
        font-weight: 600;
        // background-color: #e13e3e;
      }
    }
    img {
      margin-left: 15px;
      margin-right: 8px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      -webkit-app-region: no-drag;
    }
    .click-icon {
      width: 34px;
      height: 34px;
      -webkit-app-region: no-drag;
      margin-left: 0px;
      color: #666;
    }
    .click-icon:hover {
      color: #3917d3;
      background: #eee;
    }
    .close-icon {
      transition: all 0.3s;
    }
    .close-icon:hover {
      background-color: #e61123;
      color: #fff;
    }
  }
}
.input {
  border: none;
  padding: 6px;
  border-radius: 6px;
  background: #eceff3;
  box-shadow: 20px 20px 100px #c5c5c5, -20px -20px 60px #ffffff;
  transition: 0.3s;
  -webkit-app-region: no-drag;
  color: #3b2fe2;
  font-weight: 600;
}

.input:focus {
  outline-color: #e8e8e8;
  background: #e8e8e8;
  // box-shadow: inset 20px 20px 60px #c5c5c5, inset -20px -20px 60px #ffffff;
  transition: 0.3s;
}
</style>
